<template>
	<div class="wokrPlanPage">
		<div class="note" :style ="note">
			<div class="inform">
				<span>工作计划</span>
				<div class="menu" @click="Oclicks()">
					<img src="@as/img/zuzhi_wode_fl@2x.png" alt="">
					<span>分类</span>
				</div>
			</div>
		</div>
		<mu-container class="mu-container" v-show="show3">
			<div>
				<div class="mu-transition-box mu-primary-color mu-inverse" >
					<div class="inform">
						<span>工作计划</span>
						<img src="@as/img/zuzhi_wode_del@2x.png" alt="" @click="vanishs">
					</div>
					<ul>
						<li @click="yhj_Oclicks()" :class="show == 0?'acti':''">
							<span>类型</span>
							<img src="@as/img/zuzhi_wode_xiala@2x.png" alt="">
						</li>
						<li @click="yhj_vanishs()" :class="show == 1?'acti':''">
							<span>时间</span>
							<img src="@as/img/zuzhi_wode_xiala@2x.png" alt="">
						</li>
					</ul>
					<div class="cd" v-if="show==0">
						<div v-for="(item,index) in types" :key="index" @click="typeMsg(item.id)">
							<span>{{item.name}}</span>
						</div>
					</div>
					<div class="cd" v-if="show==1">
						<div v-for="(item,index) in yearList" :key="index" @click="yearMsg(item)">
							<span>{{item}}</span>
						</div>
					</div>
				</div>
			</div>
		</mu-container>
		<Loading  v-if="notMore"  class="empty-text-wrap" />
		<mu-load-more  @load="load" :loading="loading">
			<div class="list">
				<div class="bar" v-for="(item,index) in WorkplanList" :key="index" @click="workplan_details(item)" :class="{'month-plan':item.typeplan==1,'year-plan':item.typeplan==2}">
					<!-- typeplan 1月度 2年度-->
					<!--<img class="bq" src="@as/img/zuzhi_wode_cc@2x.png" alt="" v-if="item.typeplan==1">-->
					<!--<img class="bq" src="@as/img/zuzhi_wode_cheng@2x.png" alt="" v-if="item.typeplan==2">-->
					<div class="step1">
						<div class="title">
							<span>{{item.title}}</span>
						</div>
					</div>
					<div class="step2">
						<div class="lfx">
							<span v-if="item.typeplan==1">{{(item.start_time) | getMonth}}</span>
							<span v-if="item.typeplan==2">{{(item.start_time) | getYear}}</span>
						</div>
						<div class="rf">
							<!-- typeplan 1月度 2年度-->
							<span v-if="item.typeplan==1" class="col_1">月度计划</span>
							<span v-if="item.typeplan==2" class="col_2">年度计划</span>
						</div>
					</div>
				</div>
				<div class="loading">{{loaded}}</div>
			</div>
			<!-- 分类弹窗 -->

		</mu-load-more>
		<div class="loading" v-if="loadOver&&p!=1">{{loaded}}</div>
	</div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
    export default {
        data() {
            return {
                loaded:'加載更多...',
                p:1,
                loading: false,
                page:5,
                show: 0,
                loadOver:false,
                show3: false,
                notMore: false,
                types:[
                    {
                        name:'月度计划',
                        id:1
                    },
                    {
                        name:'年度计划',
                        id:2
                    }
                ],
                yearList:[],//年份数组
                WorkplanList:[],//列表
                typeplan:0,
                year :new Date().getFullYear(),
                note: {
                    backgroundImage: "url(" + require("@as/img/workplan_paihang_bg@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% ",
                },
            }
        },
		components:{
            Loading
		},
        mounted() {
			this.$progress.done();
        },
        methods: {
            // 工作计划类型
            typeMsg: function(id) {
                this.WorkplanList =[];
                this.notMore =false;
                this.typeplan = id;
                this.p=1;
                this.getWorkplan(this.p);
                this.vanishs();
            },
            // 最近六年选择
            yearMsg: function(item) {
                this.WorkplanList =[];
                this.notMore =false;
                this.year = item;
                this.p=1;
                this.getWorkplan(this.p);
                this.vanishs();
            },
            yhj_Oclicks: function() {
                this.show = 0;
            },

            yhj_vanishs: function() {
                this.show = 1;
            },
            vanishs: function() {
                this.show3 = false;
            },
            Oclicks: function() {
                this.show3 = true;
            },
            workplan_details:function(item){
                this.$router.push({ path: '../organization/workplanDetails' , query: item })
            },
            getWorkplan(p) {
                let that = this;
                // that.WorkplanList=[];
                that.$http
                    .get("/app/workplan/index", {
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        p: p,
                        page: that.page,
                        typeplan:that.typeplan,
                        time:that.year,
                    })
                    .then(res => {
                        console.log(res.data);
						if(res.data.length){
                            that.WorkplanList.push(...res.data);
						}
                        this.loadOver =false;
                        if(p!=1){
                            console.log(res.data);
                            if(res.data.length){
                            }else{
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了'
                                return false
                            }
                        }else {
                            if(!res.data.length){
                                // alert(1111)
                                this.notMore =true;
                                this.loadOver =false;
                            }else{
                                // alert(2222)
                                if(res.data.length<5&&res.data.length!=0){
                                    this.loadOver =true;
                                    this.loaded='没有更多数据了'
                                }
                            }
                        }

                        // if (res.data.length == 0) {
                        //     that.loaded = "没有更多";
                        //     that.loading = true;
                        //     that.notMore = false;
                        //     return;
                        // }
                        // that.WorkplanList=[];
                        // that.WorkplanList.push(...res.data);
                        // if (res.data.length < 10) {
                        //     that.loaded = "没有更多了";
                        //     that.notMore = false;
                        //     return;
                        // }
                    });
            },
            load() {
                // this.loading = true;
                // if (this.notMore) {
                //     clearTimeout(this.method);
                //     this.method = setTimeout(() => {
                //         this.p = this.p + 1;
                //         this.getWorkplan(this.p);
                //     }, 500);
                // }
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.getWorkplan(this.p);
                        this.loading =false;
                    }, 2000);
                }
            },
        },
        created(){
            this.getWorkplan(1);
            let year = new Date().getFullYear();
            for(var i=-5; i<=0;i++){
                this.yearList.push(year+i)
            }
        }
    }
</script>

<style scoped lang="scss">
	.wokrPlanPage{
		min-height: 100vh;
		.mu-load-more{
			/*min-height:100vh;*/
			/*overflow: auto !important;*/
			/*padding: 0 0 15px 0!important;*/
		}
	}

</style>
<style scoped lang="scss">
	.mu-transition-row {
		margin-top: 16px;
		min-height: 100px;
	}
	.mu-container{
		width:calc(100% + 17px);
		margin-left: -8.5px;
		margin-right: -8.5px;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 99999;
	}
	.mu-transition-box {
		background: #FFF;
		width: 100%;
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 1s ease-in 1s;
		.inform{
			width:100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 25px;
			span{
				font-size: 28px;
				color:#000;
				font-weight: bold;
			}
			img{
				width:14.5px;
				height:14.5px;
			}
		}
		ul{
			width:100%;
			display: flex;
			justify-content: center;
			margin-top: 15px;
			li{
				width:20%;
				padding: 10px 10px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					font-size: 14px;
					color: #999;
				}
				img{
					width:7px;
					height:5px;
					margin-left: 3px;
				}
			}
			li.acti{
				span{
					font-size: 15px;
					color: #333;
					font-weight: bold;
				}
			}
		}
		.cd{
			width:100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 15px;
			div{
				width:48%;
				height:30px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #f8f8f8;
				border-radius: 3px;
				margin-bottom: 10px;
				span{
					font-size: 12px;
					color:#666;
				}
			}
		}
	}
</style>
<style scoped lang="scss">
	.note{
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		width:100%;
		height:197px;
		position: relative;
	}
	.inform{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25px;
		span{
			font-size: 28px;
			color:#000;
			font-weight: bold;
		}
		.menu{
			width:55px;
			height:22.5px;
			background: #666;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			img{
				width:13.5px;
				height:12.5px;
			}
			span{
				font-size: 10px;
				color: #FFF;
				margin-left: 1px;
			}
		}
	}
	.list{
		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		/*position: absolute;*/
		left: 0;
		top:120px;
		z-index: 999;
		.bar{
			width:100%;
			box-shadow: 0px 6px 15px 2px #f1f1f1;
			padding: 20px 20px;
			position: relative;
			margin-bottom: 15px;
			background: #fff;
			border-radius: 5px;
			position: relative;
			&.month-plan :after{
				position: absolute;
				content: '';
				width:4px;
				height:26px;
				background:rgba(244,117,72,1);
				border-radius:0px 6px 6px 0px;
				left: 0;
				top: 20px;
			}
			&.year-plan:after{
				background:rgba(255,173,25,1);
				position: absolute;
				content: '';
				width:4px;
				height:26px;
				border-radius:0px 6px 6px 0px;
				left: 0;
				top: 20px;
			}
			.step1{
				width:100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 14px;
				/*padding: 10px 0;*/
				box-sizing: border-box;
				margin-bottom: 16px;
				margin-top: 6px;
				.time{
					width:100%;
					display: flex;
					justify-content: flex-start;
					span{
						font-size: 12px;
						color: #999;
						display: inline-block;
					}
				}
				.title{
					width:100%;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					span{
						font-size: 14px;
						color: #333;
						display: inline-block;
					}
				}
			}
			.step2{
				width:100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				// margin-top: 20px;
				.lfx{
					display: flex;
					align-items: center;
					span{
						font-size: 12px;
						color:#999;
						margin-left: 3px;
					}
				}
				.rf .col_1{
					font-size: 12px;
					color: #eb4d44;
				}
				.rf .col_2{
					font-size: 12px;
					color: #ffc573;
				}
			}
		}


	}
	.loading {
		width: 343px;
		margin: 0 16px ;
		font-size: 14px;
		color: #dddddd;
		clear: both;
		line-height: 61px;
		text-align: center;
		margin-top: -50px;
		/*width: 100%;*/
		/*font-size: 14px;*/
		/*color: #dddddd;*/
		/*display: flex;*/
		/*align-items: center;*/
		/*justify-content: center;*/
		/*margin-top: 24px;*/
		/*margin-bottom: 12px;*/
	}

	.mu-load-more /deep/ .mu-circle-spinner{
		border-color: #e5e5e5;
	}
	.empty-text-wrap{
		height: calc(100%  - 200px);
		width: 100%;
		margin-top: 220px;
	}
	/*.wokrPlanPage /deep/ .mu-infinite-scroll{*/
		/*display: none;*/
		/*height: 0;*/
	/*}*/
</style>